<template>
    <div id="big_psaaword">
	    <div class="psaaword">
	    	<div class="psaaword_step">
	    		<Steps :current="current">
			        <Step title="选择方式" content=""></Step>
			        <Step title="验证身份" content=""></Step>
  				</Steps>
	    	</div>
	    	
  			<div class="psaaword_check" v-show="check">
  				<div class="psaaword_one ">
  					<span class="psaaword_one_span" >通过手机找回</span>
  					 <Button type="primary" class="psaaword_one_but" @click="PhoneClick()">立即找回</Button>
  				</div>
  				<div class="psaaword_one ">
  					<span class="psaaword_one_span">通过邮箱找回</span>
  				    <Button type="primary" class="psaaword_one_but" @click="EmailClick()">立即找回</Button>
  				</div>
  			</div>
  			
  			<div class="psaaword_identity" v-show="identity">
  				<div class="psaaword_oneidentity ">
  					<div style="width: 15%;">
  						<span class="psaaword_one_spanidentity" >会员名:</span>
  					</div>
  					<div style="width: 80%;">
  						<i-input type="text" v-model="user" placeholder="输入会员名" :maxlength="15"></i-input>
  					</div>
  				</div>
  				<div class="psaaword_oneidentity ">
  					<div style="width: 15%;">
  						<span class="psaaword_one_spanidentity" >手机号码:</span>
  					</div>
  					<div style="width: 80%;">
  						<i-input type="text" v-model="user" placeholder="输入用户名" :maxlength="15"></i-input>
  					</div>
  				</div>
  				<div class="psaaword_oneidentity">
  					<div style="width: 15%;">
  						<span class="psaaword_one_spanidentity" >验证码:</span>
  					</div>
  					<div style="width: 60%;">
  						<i-input type="text" v-model="user" placeholder="输入用户名" :maxlength="15"></i-input>
  					</div>
  					<Button type="primary" class="psaaword_butidentity" @click="CodeClick()">获取验证码</Button>
  				</div>
  				<div class="psaaword_oneidentity ">
  					<div style="width: 15%;">
  						<span class="psaaword_one_spanidentity" >新密码:</span>
  					</div>
  					<div style="width: 80%;">
  						<i-input type="text" v-model="user" placeholder="输入新密码" :maxlength="15"></i-input>
  					</div>
  				</div>
  				<Button type="primary" class="psaawordbuttom" @click="NextClick()">下一步</Button>
  			</div>
  			
  			<div class="psaaword_identity" v-show="emailCheck">
  				<div class="psaaword_oneidentity ">
  					<div style="width: 15%;">
  						<span class="psaaword_one_spanidentity" >会员名:</span>
  					</div>
  					<div style="width: 80%;">
  						<i-input type="text" v-model="user" placeholder="输入会员名" :maxlength="15"></i-input>
  					</div>
  				</div>
  				<div class="psaaword_oneidentity ">
  					<div style="width: 15%;">
  						<span class="psaaword_one_spanidentity" >用户名:</span>
  					</div>
  					<div style="width: 80%;">
  						<i-input type="text" v-model="user" placeholder="输入用户名" :maxlength="15"></i-input>
  					</div>
  				</div>
  				<div class="psaaword_oneidentity ">
  					<div style="width: 15%;">
  						<span class="psaaword_one_spanidentity" >邮箱:</span>
  					</div>
  					<div style="width: 80%;">
  						<i-input type="text" v-model="user" placeholder="输入邮箱" :maxlength="15"></i-input>
  					</div>
  				</div>
  				<Button type="primary" class="psaawordbuttom" @click="NextClick()">下一步</Button>
  			</div>
  			
	    </div>
    </div>
</template>
<script>
	export default {
    	name: 'Password',
         data () {
            return {
                    password: '',
                    check:true,
                    identity:false,
                    current:0,
                    emailCheck:false
            }
        },
        methods: {
        	EmailClick(){
        		this.check = false
            	this.identity = false
            	this.emailCheck = true
            	this.current=1
        	},
            PhoneClick() {
            	this.check = false
            	this.identity = true
            	this.emailCheck = false
            	this.current=1
            },
            NextClick(){
            	/*this.check = false
            	this.identity = false
            	this.current=2*/
            }
        }
    }
</script>
<style>
	.psaawordbuttom1{
		position: relative;
	    top: 30px;
	    left: 80px;
	    width: 50%;
	}
	.psaawordbuttom{
		position: relative;
	    top: 30px;
	    left: 80px;
	}
	.psaaword_butidentity{
		height: 30px;
	    position: relative;
	    top: 8px;
	    right: -10px;
	}
	.psaaword_one_spanidentity{
		font-size: 16px;
	}
	.psaaword_one_but{
		position: relative;
		top: 30px;
	    right: -340px;
	}
	.psaaword_one_span{
		color:  #8392A7;
		position: relative;
		top: 30px;
	    right: -110px;
	}
	.psaaword_step{
		margin-left: 100px;
	}
	.ivu-steps .ivu-steps-title{
		position: relative;
	    top: 35px;
	    left: -50px;
	}
	.psaaword_check,.psaaword_identity{
		height: 200px;
		margin-top: 60px;
	}
	.psaaword_one{
		border: 1px solid #E6E6E6;
		height: 90px;
		margin-top: 20px;
	}
	.psaaword_oneidentity{
		height: 45px;
		margin-top: 10px;
		display: flex;
		line-height: 45px;
	}
	.psaaword{
		width: 600px;
		height: 420px;
		position: absolute;
		left: 50%;
		margin-left: -300px;
		top: 50%;
		margin-top: -225px;
		z-index: 100;
		background: rgba(255, 255, 255, 0.9);
		padding: 30px 40px;
	}
	#big_psaaword{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background-image: url(../../../static/login_img/320032.jpg);
	}
</style>